<!--  / warpper  -->
<main class="warpper">

    {notempty name="$data.content1"}
    <div class="showSec1 advSec1">
        <div class="showSec1_txt">
            {$data.content1}
        </div>
    </div>
    {/notempty}

    {notempty name="$data.images2"}
    <div class="advSec2">
        <div class="advSec2_con">
            <!-- 商品切换轮播 -->
            {foreach $data.images2 as $images2}
            <div class="swiper-container advSec2Swiper">
                <div class="swiper-wrapper">
                    {foreach $images2 as $images2_}
                    <div class="swiper-slide">
                        <div class="advSec2Swiper_img"
                             style="background: url({$images2_}) center top/cover no-repeat;"></div>
                    </div>
                    {/foreach}
                </div>
            </div>
            {/foreach}
            <div class="advSec2Swiper_btn">
                <img class="advSec2Swiper_prev" src="__CDN__/static/images/prev3.png" alt="">
                <img class="advSec2Swiper_next" src="__CDN__/static/images/next3.png" alt="">
            </div>
        </div>
    </div>
    {/notempty}

    {notempty name="$data.video3"}
    <div class="advSec3">
        <div class="advSec3_con">
            <div class="advSec3_txt">
                <p>{$data.string3}</p>
            </div>
            <div class="advSec3_video">
<!--                <video controls reload width="100%" poster="/static/images/advSec3_img.jpg">-->
                <video controls reload width="100%">
                    <source src="__CDN__{$data.video3}" type="video/mp4">
                </video>
                <div class="videoPlay">
                    <img src="__CDN__/static/images/play2.png" alt="">
                </div>
            </div>
        </div>
    </div>
    {/notempty}

    {notempty name="$data.images4"}
    <div class="advSec4">
        <div class="indSec4_logo">
            <img src="__CDN__/static/images/logo2.png" alt="">
        </div>
        <div class="advSec4_con">
            <!-- 左侧小图轮播 -->
            <div class="swiper-container advSec4Swiper" dir="rtl">
                <div class="swiper-wrapper">
                    {foreach $data.images4 as $images4}
                    <div class="swiper-slide">
                        <div class="advSec4Swiper_img"
                             style="background: url({$images4}) center top/cover no-repeat;"></div>
                    </div>
                    {/foreach}
                </div>
                <div class="advSec4_txt">
                    <img src="__CDN__/static/images/logoBlack.png" alt="">
                    <p>{$data.string4}</p>
                </div>
            </div>
            <!-- 右侧大图轮播 -->
            <div class="swiper-container advSec4Swiper2" dir="rtl">
                <div class="swiper-wrapper">
                    {foreach $data.images4 as $images4}
                    <div class="swiper-slide">
                        <div class="advSec4Swiper_img"
                             style="background: url({$images4}) center top/cover no-repeat;"></div>
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
    </div>
    {/notempty}

    <div class="advSec5">
        <div class="advSec5_con">
            <div class="advSec5_txt">
                <p>{$data.string5}</p>
            </div>
            <div class="advSec5_img">
                <img src="{$data.image5}" alt="" width="100%">
            </div>
        </div>
    </div>

</main>
<!--  / warpper  -->
<script>
    $(function () {

        // 形象大片轮播
        var advSec2Swiper = new Swiper('.advSec2Swiper', {
            loop: true,
            speed: 1000,
            observer: true,
            observeParents: true,
            autoplay: 3000,
            autoplayDisableOnInteraction: false,
            prevButton: '.advSec2Swiper_prev',
            nextButton: '.advSec2Swiper_next',
        })

        // 视频鼠标点击播放视频
        $('body').on('click', '.advSec3_video', function () {
            $(this).toggleClass('play');
            if ($(this).hasClass('play')) {
                $(this).find('video').trigger('play');
            } else {
                $(this).find('video').trigger('pause');
            }
        })

        // 左侧小图轮播
        var advSec4Swiper = new Swiper('.advSec4Swiper', {
            initialSlide: 1,
            loop: true,
            speed: 1000,
            observer: true,
            observeParents: true,
            autoplay: 5000,
            autoplayDisableOnInteraction: false,
            simulateTouch: false,
        })
        // 右侧大图
        var advSec4Swiper2 = new Swiper('.advSec4Swiper2', {
            loop: true,
            speed: 1000,
            observer: true,
            observeParents: true,
            autoplay: 5000,
            autoplayDisableOnInteraction: false,
            simulateTouch: false,
        })
        // 点击左侧切换下一张
        $('body').on('click', '.advSec4Swiper', function () {
            advSec4Swiper.slideNext();
            advSec4Swiper2.slideNext();
        })

    })

    $(window).ready(function () {
        $('.headerNav:first-child li').eq(1).addClass('on');
    })
    $(window).load(function () {

    })
    $(window).resize(function () {

    })

    $(window).scroll(function () {
        var h = $(window).scrollTop()


    })

</script>
